<template>
	<view class="wy_complaints">
		<view class="complaints_head">
			致力为你提供专业的、高品质的服务，对我们的服务有任何意见请及时提出。我们将以最快的速度回复
		</view>
		<view class="complaints_con">
			<view class="con_tit">投诉内容</view>
			<textarea class="con_textarea" v-model="content" placeholder="请输入报修内容 (500)" />
			<view class="upload_img">
				<u-upload ref="uUpload" :header="headers" :custom-btn="true" :max-size="5 * 1024 * 1024" max-count="3" height="130" width="130" file-list="fileList" :action="action" style="position: relative;">
					 
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon style="position: absolute; top:50%;left: 50%; transform: translate(-50%,-50%);" name="plus" color="#909399" size="60" ></u-icon> 
					</view>  
				</u-upload>  
			</view>
			  
		</view>
		<!-- 按钮 -->
		<view class="complaints_btn" @click="addCircle">
			确定
		</view>
	</view>
</template>

<script>
    import {getStorages} from '@/utils/storage'
	export default {
		data() {
			return {
				// 图片上传地址
				action: 'https://community.chuangxiangdianli.com/api/Mini/circle/uploadImg',
				// 图片路径
				images: [],
				// 投诉内容
				content: '',
				fileList:[],
				// 请求头
				headers: {
					"Authorization": ''
				},
				// 返回物业服务页面
				goPropertyTime: null
			};
		},
		onShow() {
			if(getStorages('userInfo')){ 
				this.headers.Authorization = 'Bearer' + ' ' + getStorages('userInfo').token
			}
		},
		onUnload() {
			clearTimeout(this.goPropertyTime)
		},
		methods:{
			// 提交
			addCircle(){ 
				let _this = this
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = _this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})   
				// 过滤图片 
				_this.filterImgs(files)
				// 提交
				_this.getComplains()
			},
			// 过滤图片路径
			filterImgs(arr){ 
				let newImgs = []  
				arr.map((val,i) => {
					newImgs.push(this.$baseImgUrl + val.response.data.path) 
				})
				this.images = Array.from(new Set(newImgs)) 
			},
			// 提交投诉建议
			getComplains(){
				this.$mrequest2({
					url: 'Mini/Estate/complains',
					method: 'POST',
					data:{
						content: this.content,
						img: this.images
					}
				}).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '提交完成',
							icon: 'none'
						})
						clearTimeout(this.goPropertyTime)
						this.goPropertyTime = setTimeout(() => {
							uni.navigateBack()
						},1000)
					} 
				})
			}
		}
	}
</script>

<style lang="scss">
.wy_complaints{
	height: 100vh;
	background-color: #f2f2f2; 
	.complaints_head{
		padding: 34rpx;
		text-indent: 2em;
		height: 180rpx;
		line-height: 40rpx;
		font-size: 30rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #f5f5f5;
	}
	.complaints_con{ 
		padding: 0 34rpx 34rpx 34rpx;
		// height: 580rpx;
		background-color: #fff;
		.con_tit{
			height: 94rpx;
			line-height: 120rpx;
			font-size: 34rpx;
			color: #333;
			font-weight: 700;
		}
		.con_textarea{
			width: calc(100% - 66rpx);
			padding: 33rpx; 
			height: 264rpx;
			font-size: 26rpx;
			background-color: #f5f5f5;
		}
		.upload_img{  
			margin-top: 20rpx;
			height: 120rpx;
			.slot-btn{
				position: relative;
				width: 120rpx;
				height: 120rpx;
				border: 2rpx dashed #5C5C5C;
				border-radius: 5rpx;
			}
			.up_img_num{
				position: absolute;
			}
		}
	}
	
	.complaints_btn{ 
		margin: 45rpx;
		font-size: 36rpx;
		color: #fff;
		height: 92rpx;
		text-align: center;
		line-height: 92rpx;
		background: #34B0FF;
		border-radius: 46rpx;

	}
}
</style>
